<template>
	<el-header height="60px" class="e-headers">
		<el-menu :default-active="activeIndex"
		         background-color="#545c64"
		         text-color="#fff"
		         active-text-color="#ffd04b"
		         class="el-menu-demo"
		         mode="horizontal"
		         @select="handleSelect">
			
			<el-menu-item>
					怪客课堂 管理后台
			</el-menu-item>
			
			
			<el-submenu index="2" style="float:right">
				<template slot="title">
					<i class="el-icon-setting"></i>
					{{ info.username }}
				</template>
				<el-menu-item index="3-1">
					<i class="el-icon-s-home"></i>
					<a href="/">首页</a>
				</el-menu-item>
				<el-menu-item index="3-2" @click="Logout">
					<i class="el-icon-top-left"></i>
					退出登录
				</el-menu-item>
			</el-submenu>
			
			
		</el-menu>
	</el-header>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator"
	@Component({})
	export default class HeaderComponents extends Vue{
		public activeIndex:String = '1';
		public info: Object = {};
		created () {
			this.info = localStorage.getItem('status') == null
								? {}
								: JSON.parse(this.$utils.uncompile(localStorage.getItem('status')));
		}
		

		handleSelect(key, keyPath) {
			console.log(key, keyPath);
		}
		
		Logout() {
			localStorage.removeItem("status");
			location.href = "/"
		}
	}
</script>

<style scoped>
	.e-headers {
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
	}

</style>